<template>
    <div class="user">
        <el-card>
            <h3>详情</h3>
            <el-divider></el-divider>
            <div class="userbutton">
                <el-button type="success">删除</el-button>
            </div>
            <div class="table">
                <el-table ref="multipleTable" :data="userList" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column align="center" label="序号" width="100" type="index" fixed>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="100" align="center" fixed>
                    </el-table-column>
                    <el-table-column prop="bumen" label="部门" width="100" align="center">
                    </el-table-column>
                    <el-table-column prop="tel" label="手机号" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="jobNum" label="工号" width="130" align="center">
                    </el-table-column>
                    <el-table-column prop="idNum" label="证件号" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="jibengognzi" label="基本工资" width="110" align="center">
                    </el-table-column>
                    <el-table-column prop="koukuan" label="考勤扣款总计" width="110" align="center">
                    </el-table-column>

                    <el-table-column prop="gongjijin" label="公积金" width="110" align="center">
                    </el-table-column>
                    <el-table-column prop="shehuibaoxian" label="社会保险" width="120" align="center">
                    </el-table-column>

                    <el-table-column prop="yingfa" label="应发工资" width="100" align="center">
                    </el-table-column>
                    <el-table-column prop="yingshui" label="应税工资" width="130" align="center">
                    </el-table-column>

                    <el-table-column prop="geresuodeshui" label="个人所得税" width="130" align="center">
                    </el-table-column>
                    <el-table-column prop="shifa" label="实发工资" width="130" align="center">
                    </el-table-column>
                </el-table>

                <div class="page">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="queryInfo.currentIndex" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fileList: [],
            yaoqiu: false,
            data: [],
            dialogVisible: false, // 确定上传
            queryInfo: {
                pageSize: 5,
                currentIndex: 1,
            },
            total: 0,
            title: "用户信息表",
            json_fields: {
                // 序号: "index",
                姓名: "name",
                账号: "account",
                部门: "stationId.name",
                岗位: "organId.name",
                手机号: "phone",
                邮件: "email",
                角色: "role_id.name",
                // 状态: "complete",
            },

            userList: [],
        };
    },
    created() { },
    mounted() {
        // 用户
        this.getUserList();
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(res) {
            if (res.code == 200) {
                this.data = res.arr;
                this.yes_upload();
            }
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        onSubmit() {
            console.log("submit!");
        },
        async yes_upload() {
            let {
                data: { code },
            } = await this.$axios.post("empadds", this.data);
            if (code == 200) {
                this.$router.replace({ name: "emp" });
                this.$message({
                    message: "上传成功",
                    type: "success",
                });
            }
        },
        // 获取用户数据
        async getUserList() {
            const { data } = await this.$axios.get("/getxinzi", {
                params: this.queryInfo,
            });
            if (data.code != 200) {
                return this.$message.error("用户列表获取失败");
            }
            console.log(data.data, "55555555");
            this.userList = data.data;
            this.total = data.total;
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => { });
        },
        handleSizeChange(newSize) {
            this.queryInfo.pageSize = newSize;
            this.getUserList();
        },
        handleCurrentChange(newPage) {
            this.queryInfo.currentIndex = newPage;
            this.getUserList();
        },
    },
};
</script>

<style scoped>
.user {
  width: 100%;
  height: 100%;
}
.user .userbutton button {
  font-size: 10px;
}
.user .table {
  margin-top: 15px;
}
.user .userbutton {
  display: flex;
}
.user .userbutton button {
  margin: 10px;
}
.user .page {
  margin-top: 20px;
  margin-left: 450px;
}
</style>
